<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>历史租赁查询</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.min.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.24/daterangepicker.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">
    <style>
        thead th {
            background-color: #f1f1f1;
            min-width: 50px;
        }

        td {
            background-color: #fafffb;
            border: white solid 1px;
        }

        th, td {
            font-size: 12px;
        }

        .box {
            border: 0px;
        }

        .add {
            margin: 10px 80px;
            margin-top: 50px;
        }

        a {
            color: #00f;
            font-weight: 300;
        }

        .hover:hover {
            cursor: pointer;
        }
    </style>
  <!--  <script src="../../vendor/easyui/jquery.min.js"></script>
    <script src="../../vendor/easyui/jquery.easyui.min.js"></script>-->
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/jquery/jqueryUi/jquery-ui.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../Date-Format.js"></script>
    <script src="../../common.js"></script>


</head>

<body>


<div id="app" class="container-fluid">
    <!--<div class="input-group">
        <input v-model="customerName" type="text" class="form-control" placeholder="房间号">
        <span class="input-group-btn">
						<button @click="search" class="btn btn-default" type="button">搜索</button>
					  </span>
    </div>-->

    <div class="row">
        <div class="col-xs-7">
            <div class="box">
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>房间名称</th>
                            <th>客户姓名</th>
                            <th>起租日期</th>
                            <th>结束日期</th>
                            <th>基本房租</th>
                            <th>押金</th>
                            <th>是否使用网络</th>
                            <th>是否空房</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="list in historicalLease">
                            <td>{{$index}}</td>
                            <td>{{list.room.name}}</td>
                            <td>{{list.customerName}}</td>
                            <td>{{setDate(list.startDate,"yyyy-MM-dd")}}</td>
                            <td>{{setDate(list.endDate,"yyyy-MM-dd")}}</td>
                            <td>{{list.basePayment}}</td>
                            <td>{{list.deposit}}</td>
                            <td v-if="list.hasNet">是</td>
                            <td v-else>否</td>
                            <td v-if="list.room.isEmpty">是</td>
                            <td v-else>否</td>
                            <td><a v-if="list.room.isEmpty" href="../common/newLease.html?roomNum={{list.room.name}}" >新建租赁</a>
                                <a v-else href="#" style="cursor:default;color:#ccc;">新建租赁</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


</div>


<script>
    //首先使用一个闭包,防止污染全局对象

    (function () {

        //定义页面的mvvm对象,用法参考 vuejs框架
        var vm = new Vue({
            el: "#app",
            data: {
                historicalLease: [],
                customerName:''
            },
            computed: {},
            created: function () {
              this.loadData();
            },
            watch: {},
            methods: {
                loadData: function () {
                    var param = {
                        userId: "1"
                    };
                    var _this = this;
                    getList(param, function (data) {
                        _this.historicalLease = data;
                    });
                },
                search: function () {
                    var _this = this;
                    var param = {customerName: this.customerName};
                    console.info(this.customerName);
                    getSearch(param, function (data) {
                        _this.historicalLease = data;
                    })
                    if (param == null) {
                        this.loadData();
                    } else {
                        getSearch(param, function (data) {
                            _this.historicalLease = data;
                        })
                    }

                },
                setDate:function(date,type){
                    var todayDate=(new Date(date)).Format(type);
                    return todayDate;
                }
            }

        });

        function getList(param, cp) {
            $.get("/rental/historicalLease", param, cp);
        }

        function getSearch(param, cp) {
            $.get("/rental/search", param, cp);
        }
    })();
</script>


</body>

</html>